
<template>
  <div>
    <el-breadcrumb separator="/" style="margin-top: 6px">
      <el-breadcrumb-item
        v-for="(item, index) in obj.breadcrumbList"
        :key="item.path"
        :to="{ path: item.path }"
        @click.native="btnClick(item, index)"
        >{{ item.meta.title }}</el-breadcrumb-item
      >
    </el-breadcrumb>
    <el-page-header
      style="line-height: 40px"
      icon="el-icon-arrow-left"
      :content="obj.title"
    ></el-page-header>
  </div>
</template>
<script setup>
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
import { reactive } from "vue";
const routes = useRoute();
const router = useRouter();
let obj = reactive({ breadcrumbList: routes.matched,title: routes.meta.title});
// breadcrumbList
const btnClick = (item, index) => {
  router.go(obj.breadcrumbList.length - index);
};
onBeforeRouteUpdate(function (to, from) {
  // just use `this`
  // breadcrumbList = to.matched
  obj.breadcrumbList = to.matched;
  obj.title = to.meta.title;
});
</script>
<style lang="scss">
</style>